<style >
.plan-info.train-info {
    padding:60px 0 120px 0;
    background-color:#fff;
}

.plan-info.train-info .el-form-item .el-form-item__label {
    color:#7485B1;
}

.plan-info.train-info .el-form-item {
    margin-bottom: 10px;
    color:#3A3A63;
}

.plan-info.train-info .el-form-item .train-name {
    line-height:30px;
    max-width:800px;
    padding-top:6px;
    display: inline-block;
}

.plan-info.train-info .el-form-item a {
    color:#3577FB;
}

.plan-info .next-plan-books {
    display: flex;
    width: 720px;
    flex-flow: wrap;
}

.plan-info .next-plan-books .next-plan-book-list {
    display: flex;
    /*justify-content: center;*/
    width:124px;
    height: 160px;
    flex-direction: column;
    align-items: center;
    margin:0px 10px 16px 0;
    cursor: pointer;
}


.plan-info .next-plan-books .next-plan-book-list .next-plan-img {
    width: 124px;
    height:127px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.plan-info .next-plan-books .next-plan-book-list .next-plan-img img{
    max-width: 100%;
    height:100%;
}

.plan-info .next-plan-books .next-plan-book-list .next-plan-book-cont{
    background-color: #fff;
    padding:0 10px 0 20px;
}

.plan-info .next-plan-books .next-plan-book-list .next-plan-book-cont p {
    font-size:12px;
    color:#7485B1;
    padding:10px 0 2px;
    line-height: 1.5;
    white-space:nowrap;
    word-break:break-all;
    text-overflow:ellipsis;
}

</style>

<template>
<div class="train-info plan-info">
    <el-form ref="form" label-width="150px">
        <el-form-item label="学习计划名称">
            <span>{{ form.Title }}</span>
        </el-form-item>
        <el-form-item label="起始日期">
            <span>{{ form.StartTime }} ~ {{ form.FinishTime }}</span>
        </el-form-item>
        <el-form-item label="简介">
            <div v-html="form.Abstract"></div>
        </el-form-item>
        <el-form-item label="备注">
            <span>{{ form.Remark | curType}}</span>
        </el-form-item>
        <el-form-item label="学习模式">
            {{ form.IsUnlocked == '1' ? '解锁模式' : '普通模式' }}
        </el-form-item>
        <el-form-item label="培训人员">
            {{ selectUserName.join('、') }}
        </el-form-item>

        <el-form-item label="计划资源">
            <div class="next-plan-books">
                <div class="next-plan-book-list" v-for="(item, index) of list">
                    <div class="scroll">
                        <div class="next-plan-img">
                            <img :src="item.ResCover" :alt="item.ResName">
                        </div>
                        <div class="next-plan-book-cont">
                            <p :title="item.ResName">{{item.ResName.substr(0, 8)}} </p>
                        </div>
                    </div>
                </div>
            </div>
        </el-form-item>


    </el-form>

</div>
</el-dialog>

</div>
</template>

<script>
import qs from 'qs'
import com from 'js/common.js'

export default {
    data() {
        return {
            studyID:"",
            form:{},
            list:[],
            path:[
                {
                    name:'培训学习',
                    path:'/study/plan-list'
                },
                {
                    name:'学习计划',
                    path:'/study/plan-list'
                },
                {
                    name:'学习计划详情'
                }
            ],

            selectUserList:[],
            selectUserName:[]
        }
    },
    methods:{
        async studyInfo() {
            const { data } = await axios.post('/com/study/studyInfo', qs.stringify({'studyID': this.studyID}))

            if(data.flag == 1){
                this.form = data.data
                this.selectUserList = data.data.StudyMembersIDs
                this.getComResListByComResIDs()
                this.getUserName()
            } else {
                this.$message.error(data.msg)
            }
        },

        // 获取资源
        async getComResListByComResIDs() {
            if (this.form.ComResIDs == '' || !this.form.ComResIDs) return ;
            const {data} = await axios.post('/com/com-res/getComResListByComResIDs', qs.stringify({'comResIDs': this.form.ComResIDs}))

            if (data.flag === 1) {
                let imgArr = []
                data.data.Row.forEach(item=>{
                    imgArr.push({url: item.ResCover,param:'image/resize,m_fixed,h_300,w_400'})
                });

                com.getFullOssFiles(imgArr,(fullUrlArr)=>{
                    data.data.Row.forEach((item,index)=>{
                        item.ResCover = fullUrlArr[index]
                    });
                })

                this.list = data.data.Row
            }
        },

        // 获取选中员工的名称
        getUserName() {
            if(this.selectUserList.length <= 0) return;
            axios.post('/com/employee/getEmployeesName', qs.stringify({'employeesIDs':this.selectUserList})).then((res) => {
                var d = res.data
                if(d.flag == 1){
                    this.selectUserName = d.data.Rows
                }else {
                    this.$message.error(d.msg)
                }
            })
        },
    },

    mounted() {
        this.studyID = this.$route.query.studyID
        // 设置面包屑
        this.$store.commit('setPath', this.path)

        this.studyInfo()

    }
}
</script>
